<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script th:src="@{static/js/axios.min.js}"></script>
    <title>Document</title>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;

    }
</style>

<body>


<!--“搜索”、“导出”：根据用户名、职位、手机号、状态、角色来搜索-->
<div id="app">



    <!--<div id="appso">-->
    <el-row class="demo-autocomplete">
        <el-col :span="2">房产类型</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findHouse.housingType"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入房产类型"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>

        <el-col :span="2"> 产权证号</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findHouse.propertyRightNumber"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入产权证号"
                    :trigger-on-focus="true"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>

        <el-col :span="2"> 客户姓名</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findHouse.name"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入客户姓名"
                    :trigger-on-focus="false"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>
    </el-row>
    <br/>
    <el-row>
        <el-col :span="2"> 客户手机号</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findHouse.telephone"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入客户手机号"
                    :trigger-on-focus="false"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="findByParam(1,10)">查询</el-button>
            <el-button type="primary" size="small" @click="dialogFormHouseadd = true" icon="el-icon-circle-plus-outline">添加</el-button>
            <el-button  size="small"  @click="exportfile(1,10)"  type="primary"  icon="el-icon-download" plain>导出</el-button>
        </el-col>
    </el-row>
    <!--</div>&lt;!&ndash;end “搜索”、“导出”&ndash;&gt;-->



    <!--<div id="app">-->
    <!--1.表格-->
    <!--table 模板  ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;height: 700px"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}" >
            <el-table-column
                    prop="id"
                    label="序号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="propertyRightNumber"
                    label="产权证号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="housingType"
                    :formatter="statusFormatter1"
                    label="产权类型"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="customerInfo.productInfo.moneyChannelInfo.ditchAllname"
                    label="来源渠道"
                    width="150">
            </el-table-column>
            <!--<el-table-column
                   prop="orderStatus"
                   label="处置状态"
                   width="80">
           </el-table-column>-->
            <el-table-column
                    prop="coveredArea"
                    label="建筑面积"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="customerInfo.name"
                    label="客户姓名"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="customerInfo.telephone"
                    label="客户手机号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="customerInfo.productInfo.moneyChannelInfo.createTime"
                    :formatter="dateFormatter"
                    label="创建时间 "
                    width="200">
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="230">
                <template slot-scope="scope">
                    <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                    <el-button type="text" size="small" @click="dialogFormHousefind = true ,find_houseInfo(scope.row)" >查看</el-button>
                    <el-button type="text" size="small" @click="dialogFormHousemod = true,fill_houseInfo(scope.row)">更新</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--Element分頁插件 有待改进-->
        <el-pagination



                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="total,prev, pager, next, jumper"
                :total="total"
                >   <!--prev 表示上一页，next表示下一页，pager表示页码列表 jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量-->
                        <!--:page-sizes="[5, 10, 20, 40]" //这是下拉框可以选择的，每选择一行，要展示多少内容
                        v-if="!noResult&&!error"
                        :page-size="pagesize"         //显示当前行的条数
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="userList.length">    //这是显示总共有多少数据，-->
        </el-pagination>
    </template>

    <!--新增房产模态框-->
    <el-dialog title="新增房产" :visible.sync="dialogFormHouseadd" fullscreen>
        <el-form ref="AformInfo" :model="AformInfo" label-width="80px">
            <el-row>
                <el-form-item  label="房产信息">
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="购房时间">
                        <el-date-picker
                                v-model="AformInfo.buyTime"
                                value-format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;margin-left: 10%">

                    <el-form-item label="房产类型" :label-width="formLabelWidth">
                        <el-select v-model="AformInfo.housingType" placeholder="请选择车况">
                            <el-option label="商用" value="1"></el-option>
                            <el-option label="民用" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="购房价格">
                        <el-input v-model="AformInfo.purchasePrice"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;margin-left: 10%">
                    <el-form-item label="建筑面积">
                        <el-input v-model="AformInfo.coveredArea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="建成年代">
                        <el-input v-model="AformInfo.buildDate"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;margin-left: 10%">
                    <el-form-item label="产权证号">
                        <el-input v-model="AformInfo.propertyRightNumber"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="土地证号">
                        <el-input v-model="AformInfo.landNumber"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;margin-left: 10%">
                    <el-form-item label="契税证号">
                        <el-input v-model="AformInfo.deedTaxNumber"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="上市许可证">
                        <el-input v-model="AformInfo.license"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;margin-left: 10%">
                    <el-form-item label="房产地址">
                        <el-input v-model="AformInfo.houseAddress"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="详细地址">
                        <el-input v-model="AformInfo.detailAddress"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormHouseadd = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormHouseadd = false,add()">确 定</el-button>
        </div>
    </el-dialog>


    <!--查看模态框-->
    <el-dialog title="房屋资产详情" :visible.sync="dialogFormHousefind" fullscreen>
        <el-form ref="formInfo" :model="formInfo" label-width="80px">
            <el-row>
                <el-form-item  label="客户信息">
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item  label="订单编号">
                        <el-input v-model="formInfo.num"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" style="width: 35%;margin-left: 10%">
                    <el-form-item label="借款状态">
                        <el-input v-model="formInfo.status"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="客户姓名">
                        <el-input v-model="formInfo.name"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;margin-left: 10%">
                    <el-form-item label="来源渠道">
                        <el-input v-model="formInfo.ditchName"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;">
                    <el-form-item label="客户电话">
                        <el-input v-model="formInfo.telephone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item  label="房产信息">
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="购房时间">
                        <el-input v-model="formInfo.buyTime"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;margin-left: 10%">
                    <el-form-item label="房产类型">
                        <el-input v-model="formInfo.housingType"
                                 ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="购房价格">
                        <el-input v-model="formInfo.purchasePrice"
                                  :formatter="statusFormatter"
                        ></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;margin-left: 10%">
                    <el-form-item label="建筑面积">
                        <el-input v-model="formInfo.coveredArea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="建成年代">
                        <el-input v-model="formInfo.buildDate"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;margin-left: 10%">
                    <el-form-item label="产权证号">
                        <el-input v-model="formInfo.propertyRightNumber"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="土地证号">
                        <el-input v-model="formInfo.landNumber"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;margin-left: 10%">
                    <el-form-item label="契税证号">
                        <el-input v-model="formInfo.deedTaxNumber"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="上市许可证">
                        <el-input v-model="formInfo.license"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="width: 35%;margin-left: 10%">
                    <el-form-item label="房产地址">
                        <el-input v-model="formInfo.houseAddress"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 35%">
                    <el-form-item label="详细地址">
                        <el-input v-model="formInfo.detailAddress"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
    </el-dialog>


    <el-dialog title="更新客户房产信息" :visible.sync="dialogFormHousemod">
        <el-form :model="form" :inline="true">
            <el-input v-model="form.houseInfo_id" value="form.houseInfo_id" style="display: none" autocomplete="off"></el-input>
            <el-form-item label="建筑面积" :label-width="formLabelWidth">
                <el-input v-model="form.coveredArea" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="房产类型" :label-width="formLabelWidth">
                <el-input v-model="form.housingType" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="建成年代" :label-width="formLabelWidth">
                <el-input v-model="form.buildDate" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="购房价格" :label-width="formLabelWidth">
                <el-input v-model="form.purchasePrice" autocomplete="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="车况" :label-width="formLabelWidth">
                <el-select v-model="form.carCondition" placeholder="请选择车况">
                    <el-option label="99新" value="99"></el-option>
                    <el-option label="95新" value="95"></el-option>
                    <el-option label="8成新" value="80"></el-option>
                </el-select>
            </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormHousemod = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormHousemod = false,mod(form.houseInfo_id)">确 定</el-button>
        </div>
    </el-dialog>
</div>


<!--分页？-->
<div id="paging">

</div>

</body>


<script type="text/javascript" th:inline="javascript">

    <!--页面加载完毕后,把后端查询的数据显示在table中-->
    window.onload=function () {
        demo.findByParam(1,10);
    }



    /**table中的数据*/
        //数据
    let datas = {
            goods: [
                {
                    id:"1",
                    propertyRightNumber:123124122312,
                    housingType:'',
                    buyTime:"",
                    purchasePrice:"",
                    buildDate:"",
                    landNumber:"",
                    detailAddress:"",
                    coveredArea:21.10,
                    name:"张三",
                    telephone:"15508063557",
                    customerInfo:{
                        productInfo:{
                            moneyChannelInfo:{}
                        }
                    }


                    }]


        };

    var demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {

                //下面是分页初始参数
                currentPage:1, //初始页
                pagesize:10,    //    每页的数据
                total:60,


                //tableData是表格中的数据。  datas.goods是为了后端查询数据为空时有一个数据
                tableData: datas.goods,  //  datas数据 中的数组goods
                dialogFormHousemod: false,  //这是点击添加之后，原本隐藏的 编辑框就变为true，就显示编辑框
                dialogFormHousefind: false,   //这是点击查看之后，原本隐藏的 编辑框就变为true，就显示编辑框
                dialogFormHouseadd: false,        //这是新增按钮
                form:{      //这个是编辑里面的form表单，以下是表单要修改的内部的字段名
                    buildDate:"",
                    coveredArea:'',
                    housingType:'',
                    purchasePrice:""
                },
                formInfo: {      //这个是查看里面的formInfo表单，一下是表单要修改的内部的字段名

                    buyTime:"",
                    purchasePrice:"",
                    buildDate:"",
                    landNumber:"",
                    detailAddress:""
                    //截至这里编辑框内的内容结束
                },
                AformInfo:{     //新增房产信息

                },
                formLabelWidth: '120px',


                // total,
                //搜索的关键字
                findHouse:{
                    housingType:"",
                    propertyRightNumber:'',
                    name:'',
                    telephone:''
                },
                //存储从后端查询的 “所有客户”
                constomerInfo:[{
                    id:1,
                    name:'laoluo',
                    telephone:'12718297783'
                }],

                //原来属于appo的数据
                restaurants: [],
                state1: '',
                state2: ''
            };
        },

        methods: {


            //新增 一个vehicle数据
            add(){
                axios.get([[@{house/more}]],{
                    params:{
                        //搜索的关键字
                        buyTime:this.AformInfo.buyTime,
                            purchasePrice:this.AformInfo.purchasePrice,
                            buildDate:this.AformInfo.buildDate,
                            landNumber:this.AformInfo.landNumber,
                            license:this.AformInfo.license,
                            detailAddress:this.AformInfo.detailAddress,
                            housingType:this.AformInfo.housingType,
                            coveredArea:this.AformInfo.coveredArea,
                            propertyRightNumber:this.AformInfo.propertyRightNumber,
                            deedTaxNumber:this.AformInfo.deedTaxNumber,
                            houseAddress:this.AformInfo.houseAddress,
                    }
                }).then(res => {
                    console.log(res);
                    location.reload();
                }).catch(function (error) {
                    console.log(error);
                });
            },

            // 催收状态格式化
            statusFormatter1(row, column) {
                let colStatus = row.houseType;
                if(colStatus === 1){
                    return '商品房'
                } else {
                    return '安置房'
                }
            },


            // 日期格式化
            dateFormatter (row, column) {
                let datetime = row.customerInfo.productInfo.moneyChannelInfo.createTime;
                if(datetime){
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth()+1 + '-';
                    let d = datetime.getDate() +' ';
                    let hourTemp=datetime.getHours();
                    if (hourTemp<10){
                        hourTemp='0'+hourTemp;
                    }
                    let hour = hourTemp+':';
                    let minuteTemp=datetime.getMinutes();
                    if (minuteTemp<10){
                        minuteTemp='0'+minuteTemp;
                    }
                    let minute = minuteTemp+':';
                    let secondTemp=datetime.getSeconds();
                    if (secondTemp<10){
                        secondTemp='0'+secondTemp;
                    }
                    let second = secondTemp;
                    return y + mon + d+ hour+ minute+ second;
                }
                return ''
            },


            exportfile(pageNum,pageSize) {
                //文件导出
                alert("导出当前页");
                //获得当前页面表格的的数据并发送axios
                console.log(JSON.stringify(app.tableData));


                axios.get([[@{hpoi/gettabledata}]],{
                    params:{
                        pageNum:this.currentPage,
                            pageSize:10,
                            //搜索的关键字
                            housingType:housingType,
                            propertyRightNumber: this.findHouse.propertyRightNumber,
                            name: this.findHouse.name,
                            telephone: this.findHouse.telephone,
                    }
                }).then(function (msg) {
                        //创建a标签
                        var a = document.createElement("a");
                        var bodyFa = document.getElementsByTagName("body");//
                        bodyFa[0].appendChild(a);//把创建的节点a 添加到父类body 中;
                        a.setAttribute("href", "poi/download?path=" + msg.data.msg);//给创建的a标签设置href值;
                        a.click();
                        bodyFa[0].removeChild(a);
                        alert("导出成功");
                    }
                )
            },

            //分页
            handleCurrentChange: function(currentPage){
                demo.currentPage = currentPage;
                demo.findByParam(demo.currentPage,10)
            },
            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },


            //分页查询数据：把后端的数据，显示在table上
            findByParam(pageNum,pageSize) {
                console.log("in findByParam");
                /* if (this.findUser.status=='-1'){
                     statusRaw='0';
                 }else if (this.findUser.status=='1'){
                     statusRaw='1';
                 }*/
                //alert("statusRaw="+statusRaw);
                let i=new Number(this.findHouse.housingType)   //字符串转number

                axios.get([[@{house/page}]],{
                    params:{
                        pageNum:this.currentPage,
                            pageSize:10,
                            //搜索的关键字
                            housingType:i,
                            propertyRightNumber: this.findHouse.propertyRightNumber,
                            name: this.findHouse.name,
                            telephone: this.findHouse.telephone
                    }
                })
            .then(resp => {//此处一定要用 箭头函数  不然this 就不是this

                    this.tableData = resp.data.rows;
                    this.total = resp.data.total;


                })
                    .catch(error => {
                        console.log(error);
                    });
            },

            //点击表格中某一行的查看后，在弹出的对话框中显示数据
            find_houseInfo:(houseInfo)=>{
                demo.formInfo.houseInfo_id=houseInfo.id;
                demo.formInfo.buyTime=houseInfo.buyTime;
                demo.formInfo.purchasePrice=houseInfo.purchasePrice;
                demo.formInfo.buildDate=houseInfo.buildDate;
                demo.formInfo.landNumber=houseInfo.landNumber;
                demo.formInfo.license=houseInfo.license;

                demo.formInfo.name=houseInfo.customerInfo.name;
                demo.formInfo.telephone=houseInfo.customerInfo.telephone;
                demo.formInfo.ditchName=houseInfo.customerInfo.productInfo.moneyChannelInfo.ditchAllname;
                demo.formInfo.detailAddress=houseInfo.detailAddress;


                if (houseInfo.housingType===1){
                    demo.formInfo.housingType="安置房";
                }else{
                    demo.formInfo.housingType="商品房";
                }



                demo.formInfo.coveredArea=houseInfo.coveredArea;
                demo.formInfo.propertyRightNumber=houseInfo.propertyRightNumber;
                demo.formInfo.deedTaxNumber=houseInfo.deedTaxNumber;
                demo.formInfo.houseAddress=houseInfo.houseAddress;
                demo.formInfo.num=houseInfo.customerInfo.orderInfo.num;
                demo.formInfo.status=houseInfo.customerInfo.orderInfo.status;
            },

            //点击表格中某一行的“编辑后”，在 弹出的对话框中填充数据
            fill_houseInfo:(houseInfo)=>{
                //教训：一定是demo.   不要写  this.
                demo.form.houseInfo_id=houseInfo.id;
                demo.form.coveredArea=houseInfo.coveredArea;
                demo.form.housingType=houseInfo.housingType;
                demo.form.buildDate=houseInfo.buildDate;
                demo.form.purchasePrice=houseInfo.purchasePrice;
            },


            //“编辑”修改 一个house数据
            mod :(id)=>{
                let params =new FormData();

                let i = parseInt(demo.form.housingType);
                params.append("buildDate",demo.form.buildDate);
                params.append("coveredArea",demo.form.coveredArea);
                params.append("housingType",i);
                params.append("purchasePrice",demo.form.purchasePrice);
                axios.put([[@{/house/}]] + id,params).then(res => {
                    console.log(res);
                    location.reload();
                }).catch(function (error) {
                    console.log(error);
                });
            },


            statusFormatter(row, column) {
                let colStatus = row.formInfo.purchasePrice;
                if(colStatus === 1){
                    return '商用'
                } else {
                    return '民用'
                }
            },

            //"查看"的点击事件 line=scope.row,当前行的所有参数
            handleClick(line) {



                //创建a标签
                var a = document.createElement("a");
                var bodyFa = document.getElementsByTagName("body");//
                bodyFa[0].appendChild(a);//把创建的节点a 添加到父类body中;
                a.setAttribute("href", "houseInfo/getHouse?houseId="+line.id);//给创建的a标签设置href值;
                a.click();
                bodyFa[0].removeChild(a);

            },
            // del:function(id){
            //     this.tableData.splice(id,1);
            // },



            //原来属于appo中的方法
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },

            handleSelect(item) {
                console.log(item);
            }
        },//method方法截止

    });




</script>
</html>